import React from 'react'
import './index.scss'
import PropTypes from "prop-types";
import {useHistory} from "react-router-dom";
import Axios from "../../utils/Axios";
import {Avatar, Button, Image, message, Popover} from "antd";

Item.propTypes = {
  src: PropTypes.string,
  desc: PropTypes.string,
  name: PropTypes.string.isRequired,
  adminName: PropTypes.string.isRequired,
  code: PropTypes.string.isRequired,
  path: PropTypes.string.isRequired,
}

function Item(props) {
  const history = useHistory()
  const delGroup = () => {
    Axios.delete(`/admin/group/${props.id}`)
      .then(res => {
        if (res.data.code === 200) {
          message.success(res.data.msg, 1)
          props.reload(Math.random())
        }
        else message.error(res.data.msg)
      })
      .catch(e => console.log(e))
  }
  const src = `http://120.55.64.132:4569/${props.img < 10 ? '0'+props.img : props.img}.png`
  return (
    <div className="item" onClick={() => history.push(props.path)}>
      <div className="img">
        <img src={src} alt="图片加载失败"/>
      </div>

      <div className="desc">
        <div className="avatar">
          {
            props.src ?
              <Avatar src={<Image src={props.src}/>}/>
              : <Avatar style={{color: '#f56a00', backgroundColor: '#fde3cf'}}>{props.adminName[0]}</Avatar>
          }
        </div>
        <div className="content">
          <span>{props.desc ? props.desc : '该组长什么都没有留下！'}</span>
        </div>
        <div className="more">
          <Popover content={<Button onClick={(e) => {
            e.stopPropagation()
            delGroup()
          }}>删除</Button>} trigger="click">
            <span onClick={(e) => e.stopPropagation()}
            >
            ···
          </span>
          </Popover>

        </div>
      </div>

      <div className="content">
        <div className="date">
          <div className="time">{props.adminName} ~ {props.name}</div>
          <div className="ymd">{props.code}</div>
        </div>
      </div>

    </div>
  )
}

export default Item;
